<template>
  <!--  全部字体加大一号，白色背景，垂直居中，子元素宽度占满-->
  <!--  过来的授权及时手机号授权，也会提示先登录，可以自己选择手机号登录-->
  <div class="h100p bg-white col-all-center">
    <!--    上padding 7vh，兼容各平台，底部10px，左右20px-->
    <div class="pt-6vh pb-sm px w100p">

      <div>
        <div>用户信息:</div>
        <div>用户头像
          <image :src="user.avatar" class="size50px"></image>
        </div>
        <div>用户昵称:{{ user.nickname || '请登录'}}</div>
        <div>年龄:{{ user.age }}</div>
        <div>性别:{{ user && (user.gender === 1?'男':'女') }}</div>
        <div>性别:{{ user.city }}</div>
      </div>
      <!--      微信改版，不再使用@getuserinfo方式-->
      <button v-if="isWx" class="bg-blue h40px cu-btn lg row-all-center bd-none bg-active round mt w100p"
              @click="providerLoginClick()"
      >
        微信登录
      </button>

      <button v-else-if="isQQ" open-type="getUserInfo"
              class="bg-blue h40px cu-btn lg row-all-center bd-none bg-active round mt w100p"
              @getuserinfo="providerLoginClick()">
        QQ登录
      </button>

<!--      <button class="bg-blue h40px cu-btn lg row-all-center bd-none bg-active round mt w100p"
              @click="providerLoginClick('social')"
      >
        社交联盟登录
      </button>-->

      <button class="bg-blue h40px cu-btn lg row-all-center bd-none bg-active round mt w100p"
              @click="loginOut"
      >
        退出登录
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'
import LoginAPI from "@/plugins/uniuser/api/LoginAPI";
import {userModule, userStore} from "@/plugins/uniuser/store";
import ComUserRO from "@/plugins/uniuser/model/ComUserRO";
import JsonUtil from "@/plugins/uniuser/utils/JsonUtil";
import UniUserUtil from "uniapp-sdk/dist/utils/UniUserUtil";
import {uniSystemModule, uniSystemStore} from "uniapp-sdk";
import UniSystemStoreProp from "uniapp-sdk/dist/store/UniSystemStoreProp";

@Component
export default class LoginPage extends Vue {
  @uniSystemStore.State(UniSystemStoreProp.isWX) isWx: string
  @uniSystemStore.State(UniSystemStoreProp.isQQ) isQQ: string
  @userStore.State('user') user: ComUserRO

  onLoad() {
    userModule.getMineUserAction()
  }

  /*get systemMpType() {
    console.log(UniSystemInfo.mpType)
    return UniSystemInfo.mpType
  }
*/
    /*  const res = await OAuthAPI.mockApplySocialOAuthAPI()
      const SocialLoginRO = res.data
      const loginQO = UniProviderLoginQOUtil.getQOBySocialLoginRO(SocialLoginRO)*/



  //登录，授权，绑定手机号各大平台登录结果，后者授权手机号结果
  async providerLoginClick(providerType?: string) {
    console.log(uniSystemModule.platform)

    //一行代码就可以获取登录所需要的信息, 还可以配合后台使用，一键登录，记住用户
    const loginQO = await UniUserUtil.getUniProviderLoginQO()

    const {data} = await LoginAPI.providerLoginAPI(loginQO)

    console.log(JsonUtil.toJson(data))
    userModule.loginAfterSetUserAndToken(data)

  }

  loginOut() {
    userModule.removeUser()
  }
}
</script>
